<template>
  <el-dialog
    :visible.sync="visible"
    :append-to-body="false"
    :class="{'mobile-el-dialog': showMobilePage}"
    class="small-common-dialog-size supplier-address-dialog"
    width="450px"
    @close="handleClose"
  >
    <div :class="{'mobile-create-supplier-account': showMobilePage}" class="create-supplier-account-scorll">
      <Title title="添加地址" style="margin-bottom: 18px;" />
      <el-form ref="formRef" :model="formData" :label-position="showMobilePage?'left':'right'" class="address-form" label-width="80px">
        <el-form-item prop="contacts" label="联系人">
          <el-input
            v-model="formData.contacts"
            :maxlength="100"
            class="width240"
            placeholder="请输入联系人"
            type="text"
            size="small"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNo">
          <el-input
            v-model="formData.phoneNo"
            :maxlength="200"
            type="text"
            class="width240"
            size="small"
            placeholder="请输入联系电话"
          />
        </el-form-item>
        <el-form-item label="省市" prop="province">
          <three-level-area
            :selected-options="handelArr(formData.province)"
            select-type="region"
            placeholder="请选择省市"
            class="width240"
            @update:options="threeLevelArea($event)" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model="formData.address"
            :maxlength="20"
            class="width240"
            type="text"
            placeholder="请输入详细地址"
            size="small"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            :maxlength="20"
            class="width240"
            type="text"
            placeholder="请输入备注"
            size="small"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-footer">
      <el-button :loading="loading" type="primary" size="small" @click="submit()">{{ isEdit ? '保存' : '确定' }}</el-button>
      <el-button class="cancel-btn-style" size="small" style="width: 80px" @click="handleClose()">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import ThreeLevelArea from '@/components/ThreeLevelArea';
import { editAddress } from '@/api/supplier';
import { mapState } from 'vuex';
export default {
  components: {
    Title,
    ThreeLevelArea
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isEdit: false,
      visible: false,
      loading: false,
      supplierId: null,
      formData: {
        contacts: '',
        phoneNo: '',
        province: '',
        address: '',
        remark: ''
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    handleClose() {
      this.$refs.formRef.resetFields();
      this.$nextTick(() => {
        this.visible = false;
      });
    },
    init(data, isEdit = false) {
      this.visible = true;
      this.isEdit = isEdit;
      this.supplierId = Number(this.$route.params.id) || null;
      if (data) {
        this.formData = JSON.parse(JSON.stringify(data));
      }
    },
    threeLevelArea(data) {
      this.formData.province = data.join(',');
    },
    handelArr(data) {
      if (!data) return [];
      if (typeof data === 'string') {
        return data.split(',');
      } else {
        return data;
      }
    },
    checkBeforeAdd(obj) {
      for (const key in obj) {
        if (obj[key] !== '') {
          return false;
        }
      }
      return true;
    },
    submit() {
      const params = JSON.parse(JSON.stringify(this.formData));
      if (!this.isEdit && this.checkBeforeAdd(params)) {
        // 新增时全部空值直接关闭弹窗
        this.handleClose();
        return;
      }
      this.loading = true;
      editAddress(this.supplierId, params).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功');
          this.handleClose();
          this.$emit('refresh');
        }
        this.loading = false;
      }).catch(err => {
        console.log(err);
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.supplier-address-dialog {
  .address-form {
    ::v-deep {
      .el-form-item {
        .width240 {
          .el-cascader {
            width: 100% !important;
          }
        }
        .threee-level-area-wrap {
          .el-input {
            display: flex;
          }
        }
      }
    }
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
